<template>
    <div class="wrapper" :style="webStyle">
        <navigation-bar :title="'修改昵称'" :onLeftButtonClick="function(){
        toBack()}" :rightIcon="' '"></navigation-bar>
        <div class="formItem">
            <text class="icon-text">昵称 :</text>
            <input class="input" @input="onUserNameChange" ref="name" placeholder="请输入昵称" :value="name"/>
        </div>
        <div style="width:750px;">
            <text class="desc">* 注：20个字符以内，仅使用汉字、数字、字母或下划线</text>
        </div>
        <div class="button-box">
            <wxc-button text="保存" type="red"
                        :btn-style="{flex:'1', width:'312px',marginTop: '20px', marginBottom:'20px', backgroundColor: '#00BB9A',borderRadius:'36px'}"
                        @wxcButtonClicked="saveChange"></wxc-button>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    @import '../config/styles.scss';

    .wrapper {
        background-color: $--container-color;
        width: 750px;
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        bottom: 0;
    }

    .formItem {
        width: 750px;
        background-color: white;
        flex-direction: row;
        height: 100px;
        align-items: center;
    }

    .input {
        font-size: 30px;
        width: 420px;
        border-radius: 12px;
        padding: 20px;
        color: $--input-color;
        align-items: center;
        justify-content: center;
        border: 0px;
        outline: none;
    }

    .icon-text {
        color: #434A54;
        font-size: 30px;
        width: 120px;
        text-align: center;
    }

    .desc {
        color: #999999;
        font-size: 24px;
        margin-left: 24px;
        margin-top: 24px;
    }

    .button-box {
        position: absolute;
        bottom: 200px;
        left: 0;
        width: 750px;
        align-items: center;
        justify-content: center
    }
</style>

<script>
  import NavigationBar from './widget/NavigationBar.vue'
  import { getEntryPageStyle } from '../config/Config'
  import { isEmptyString } from '../core/common/commonUtils'
  import { Utils, WxcCell, WxcButton } from 'weex-ui'
  import user from '../core/net/user'

  const modal = weex.requireModule('modal')
  export default {
    components: {
      NavigationBar,
      WxcCell,
      WxcButton,
    },
    data: () => {
      return {
        name: '',
        mainStyle: {},
        webStyle: {height: '1334px', width: '750px'},
      }
    },
    methods: {
      onUserNameChange (event) {
        this.name = event.value
      },
      saveChange () {
        let reg = /^[a-zA-Z0-9_\u4e00-\u9fa5]+$/
        let re = new RegExp(reg)
        if (isEmptyString(this.name)) {
          modal.toast({
            message: '昵称不能为空',
          })
        } else if (!re.test(this.name)) {
          modal.toast({
            message: '昵称格式错误',
          })
        } else if (this.name.length > 21) {
          modal.toast({
            message: '昵称长度超过20字符',
          })
        } else {
          user.updateUserName({name: this.name}).then((res) => {
            if (res.result) {
              user.getUserInfoDao()
              this.toBack()
              modal.toast({
                message: '修改成功',
              })
            } else {
              modal.toast({
                message: '修改失败',
              })
            }
          })
        }

      },
    },
    created () {
      this.mainStyle = getEntryPageStyle(Utils)
    },
  }
</script>
